<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="swiper-container">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" circular="true" autoplay="true" interval="3000" @change="change"
					:current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view :class="item.colorClass" class="swiper-item">
							<image class="swiper-image" :src="item.url" mode="scaleToFill" :draggable="false"
								 />
								<!-- @click="onBanner(index)" -->
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 预约下单部分 -->
		<view class="order-box">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="6">
					<view class="demo-layout bg-purple to-buy" @click="toBuy">
						<image class="to-buy-img" src="~@/static/toBuy.png" mode=""></image>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple to-ask" @click="">
						<image class="to-ask-img" src="~@/static/ask.png" mode=""></image>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 案例展示 -->
		<view class="hot">
			<!-- 标题 -->
			<view class="hot-title">
				<text class="hot-title-icon">|</text>
				<text class='hot-title-title'>热门案例</text>
				<text class="hot-more">更多></text>
			</view>
			<view class="hot-content" bindtap="videoPlay">
				<view class="hot-demo">
					<view>
					 <video class="myVideo" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					                    @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
					</view>
					<image class="hot-demo-img" src="~@/static/hot.png"></image>
					<image class="hot-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
					<view class='hot-info'>
						<p class='hot-name'>我正好喜欢</p>
						<view style="padding: 3px 0;"></view>					
						<text class='fans'>粉丝:{{fans}}</text>
							<image src="~@/static/eye.png" mode="" class="eye"></image>
							<text class='hasSee'>
							
								{{hasSee}}
							</text>
					
					</view>
				</view>
				<view class="hot-demo">
					<image class="hot-demo-img" src="~@/static/hot.png"></image>
					<image class="hot-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
					<view class='hot-info'>
						<p class='hot-name'>我正好喜欢</p>
						<view style="padding: 3px 0;"></view>					
						<text class='fans'>粉丝:{{fans}}</text>
							<image src="~@/static/eye.png" mode="" class="eye"></image>
							<text class='hasSee'>
							
								{{hasSee}}
							</text>
					
					</view>
				</view>
				<view class="hot-demo">
					<image class="hot-demo-img" src="~@/static/hot.png"></image>
					<image class="hot-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg"></image>
					<view class='hot-info'>
						<p class='hot-name'>我正好喜欢</p>
						<view style="padding: 3px 0;"></view>					
						<text class='fans'>粉丝:{{fans}}</text>
							<image src="~@/static/eye.png" mode="" class="eye"></image>
							<text class='hasSee'>
							
								{{hasSee}}
							</text>
					
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				info: [{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 A'
					},
					{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 C'
					}
				],
				dotsStyles: {
					backgroundColor: 'rgba(255, 90, 95,0.3)',
					border: '1px rgba(255, 90, 95,0.3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
					selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
				},
				current: 0,
				swiperDotIndex: 0,
				title: '千投传媒相关案例展示',
				description: '重庆鸡公煲',
				nvueWidth: 730,
				fans: '34w',
				hasSee: '5654'
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			toBuy() {
				uni.navigateTo({
					url: '../formS/formS'
				})
			}
		}
	}
</script>

<style lang='stylus'>
	.container {

		height 100%;
	}

	.swiper-container {
		margin 0 20upx;
		height 320upx;
		overflow hidden;
		border-radius 30upx;
	}

	.swiper-image {
		width 100%;
		height 320upx
	}

	/* 下单 */
	.order-box {
		padding 0 20upx;
		margin-top 10upx;
	}

	.to-buy {
		color #FFFFFF;
		border-radius 25upx;
		display inline-block;
	}

	.to-buy-img {
		width 340upx;
		height 180upx;
	}

	.to-ask-img {
		width 340upx;
		height 180upx;
		padding-left 5px;
	}

	.hot-title {
		padding 10px 12px;
	}

	.hot-title-icon {
		font-weight 1000;
		color #2852FE
	}

	.hot-title-title {
		font-size 17px;
		margin-left 5px;
		font-weight 700;
	}

	.hot-more {
		color #8D9199;
		font-size 12px;
		float right;
		margin-top 5px;
	}

	.hot-content {
		padding 0 5px
	}
	.hot-demo{
		width 335upx;
		position relative;
		background-color #FFFFFF;
		border-radius 30upx;
		display inline-block;
		margin 10upx 15upx;		
	}
	.hot-demo-img {
		width 335upx;
		height 470upx;
	}
	.myVideo{
		width 0;
		height 0;
	}

	.hot-avatar {
		width 32px;
		height 32px;
		border-radius 50%;
		position absolute;
		left 30px;
		top 440upx;
	}

	.hot-name {
		color #000000;
		font-weight 600;
		font-size 15px;
	}

	.hot-info {
		overflow hidden;
		padding 20px 10px;
		position relative;
		margin-top 5px;
	}

	.fans {
		display inline-block;
		font-size 12px;
		color #999999;
		float left;
		
	}

	.hasSee {
		font-size 13px;
		color #999999;
		display inline-block ;
		float right;
		
	}

	.eye {
		width 16px;
		height 10px;
		position absolute;
		bottom 23px;
		right 45px;
	}
</style>
